<template>
	<view class="waterfall-item-container">
		<view class="waterfall-item">
			<view class="novelInfo">
				<view class="imageBox">
					<image :src="paramsInfo.txtPicture" lazy-load="true" mode="widthFix" @load="emitHeight"
						@error="errEmitHeight">
					</image>
				</view>
				<!-- <view class="content">
					<view class="">
						<image src="/static/image/homeImage/author.png" mode=""></image>
						<text>{{paramsInfo.author}}</text>
					</view>
					<view class="">
						<image src="/static/image/homeImage/heat.png" mode=""></image>
						<text>100万</text>
					</view>
					<view class="">
						<image src="/static/image/homeImage/score.png" mode=""></image>
						<text>10.0</text>
					</view>
				</view> -->
			</view>
			<view class="">
				<text>{{paramsInfo.bookName}}</text>
			</view>
			<view class="novelBtn2">
				<view class="">
					<image src="/static/image/homeImage/collect.png" mode=""></image>
					<text>666人次</text>
				</view>
				<view class="">
					<image src="/static/image/homeImage/like.png" mode=""></image>
					<text>3000人次</text>
				</view>

			</view>
			<view class="novelBtn">
				<view class="">
					<image src="/static/image/homeImage/readbook.png" mode=""></image>
					<text>阅读</text>
				</view>
				<view class=""  @click="handleRead">
					<image src="/static/image/homeImage/cache.png" mode=""></image>
					<text>缓存</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "helangWaterfallItem",
		options: {
			virtualHost: true
		},
		props: {
			params: {
				type: Object,
				default () {
					return {}
				}
			},
			place: {
				type: Number,
				default: 0
			},
			index: {
				type: Number,
				default: -1
			},
			parentPlace: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				paramsInfo: {}
			};
		},
		created() {
			// this.params.ossTxtPictureSrc =
			// 	'http://hbhnovel.oss-cn-shenzhen.aliyuncs.com/QQ%E5%9B%BE%E7%89%87202311031714369.jpg'
			this.paramsInfo = this.params
		},
		methods: {
			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
			emitHeight(e) {
				const query = uni.createSelectorQuery().in(this);
				query.select('.waterfall-item-container').boundingClientRect(data => {
					let height = Math.floor(data.height);
					this.$emit("height", height, this.$props.place);
				}).exec();
			},
			errEmitHeight(){
				//错误就替换本地错误提示图
				this.$set(this.paramsInfo,'txtPicture',"/static/error.jpg")
			},
			handleRead() {
				this.$emit("click", this.$props.index, this.$props.place, this.$props.parentPlace);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.waterfall-item {
		// padding: 16rpx;
		box-sizing: border-box;
		background-color: #fff;
		overflow: hidden;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #666;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.novelInfo {
			width: 100%;
			display: flex;
			justify-content: center;
			// padding: 0 10rpx;
			box-sizing: border-box;
			align-items: center;

			.imageBox {
				display: block;
				width: 100%;

				image {
					// border-radius: 8rpx;
					width: 100%;
					// 默认设置一个图片的大约值
					height: 200rpx;
				}

			}

			.content {
				width: 60%;
				padding: 0 10rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;

				>view {
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;

					text {
						width: 100rpx;
						display: flex;
						flex-wrap: wrap;
					}

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
				}

				.endControl {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.novelBtn2 {
			width: 100%;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view {
				width: 40%;
				height: 50rpx;
				display: flex;
				border-radius: 8rpx;
				justify-content: space-evenly;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					font-size: 20rpx;
				}
			}
		}

		.novelBtn {
			width: 100%;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view {
				width: 40%;
				height: 50rpx;
				display: flex;
				border-radius: 8rpx;
				justify-content: space-evenly;
				align-items: center;
				border: 1rpx solid #4ccfff;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					font-size: 20rpx;
				}
			}
		}
	}
</style>